<template>
	<view class="videos-container">
		<uni-nav-bar statusBar="true"
			backgroundColor="#ee7b2d"
			color="#fff"
			left-icon="back"
			title="视频">
		</uni-nav-bar>
		<scroll-view scroll-y="true"
			class="video-scroll">
			<view class="video-item" v-for="item in videoList" :key="item.id.videoId">
				<video object-fit="fill"
					class="common"
					:src="'https://www.youtube.com/embed/yo7BloCdUPI'"
					:key="item.id.videoId"></video>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	import youtube from '../../utils/youtube.js'
	export default {
		data() {
			return {
				videoList: [],
			}
		},
		onLoad() {
			this.getYoutubeData();
		},
		methods: {
			async getYoutubeData() {
				let res = await youtube();

				this.videoList = res.items.slice(0, 10);
				console.log(this.videoList);
			}
		}
	}
</script>

<style lang="scss"
	scoped>
	.videos-container {
		width: 100vw;
		height: 100vh;

		.video-scroll {
			height: calc(100vh - 176rpx);

			.video-item {
				padding: 0 3%;
				margin-bottom: 60rpx;
				border: 4rpx solid #ccc;

				.video-item video {
					width: 100%;
					height: 360rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
